<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Choose artboards - Sketch Measure 2.0</title>

    <link href="assets/css/normalize.css" rel="stylesheet">
    <link href="assets/css/app.css" rel="stylesheet">
    <script type="text/javascript" src="assets/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="assets/js/common.js"></script>
    <script type="text/javascript">
    <!--
    // var data = {
    //     exportOption: 1,
    //     order: 'alphabet',
    //     current: [0],
    //     selection: [1,2,3],
    //     pages: [
    //         {
    //             name: 'Page 1',
    //             objectID: '0',
    //             artboards: [
    //                 {
    //                     name: 'Index',
    //                     objectID: '0'
    //                 },
    //                 {
    //                     name: 'Video',
    //                     objectID: '1'
    //                 },
    //                 {
    //                     name: 'Explore',
    //                     objectID: '2'
    //                 },
    //                 {
    //                     name: 'Profile',
    //                     objectID: '3'
    //                 }
    //             ]
    //         },
    //         {
    //             name: 'Page 2',
    //             objectID: '1',
    //             artboards: [
    //                 {
    //                     name: 'Single content',
    //                     objectID: '4'
    //                 },
    //                 {
    //                     name: 'Single Video',
    //                     objectID: '5'
    //                 },
    //                 {
    //                     name: 'Search page',
    //                     objectID: '6'
    //                 },
    //                 {
    //                     name: 'Settings',
    //                     objectID: '7'
    //                 }
    //             ]
    //         }
    //     ]
    // };
    var checkVCheckbox = function(){
            var allCheckboxLength = $('input[name=artboards]').length,
                    checkedLength = $('input[name=artboards]:checked').length;

                $('.v-checkbox').removeClass('v-checked');
                $('.v-checkbox').removeClass('v-full-checked');

                if(checkedLength && checkedLength < allCheckboxLength){
                    $('.v-checkbox').addClass('v-checked');
                }
                else if(checkedLength && checkedLength >= allCheckboxLength){
                    $('.v-checkbox').addClass('v-full-checked');
                }
            $('#submit').attr('disabled', true);
            if( $('input[name=artboards]:checked').length >0 ){
                $('#submit').attr('disabled', false);
            }
        },
        checkPCheckbox = function(id){
            $('.page-list').each(function(index){

                var allCheckboxLength = $(this).find('input[name=artboards]').length,
                        checkedLength = $(this).find('input[name=artboards]:checked').length;
                $(this).find('input[name=pages]').parent().removeClass('half-checked');
                $(this).find('input[name=pages]').prop('checked', false);

                if(checkedLength && checkedLength < allCheckboxLength){
                    $(this).find('input[name=pages]').parent().addClass('half-checked');
                }
                else if(checkedLength && checkedLength >= allCheckboxLength){
                    // $(this).find('input[name=pages]').click();
                    $(this).find('input[name=pages]').prop('checked', true);
                }

            });
        },
        order = function(data){
            var order = $('input[name=order]:checked').val();
            $.each(data.pages, function(index, page){
                if(page.artboards.length > 0){
                    var artboardsData = page.artboards;

                    if(order == 'reverse'){
                        artboardsData = JSON.parse(JSON.stringify(page.artboards)).reverse();
                    }
                    else if(order == 'alphabet'){
                        artboardsData = JSON.parse(JSON.stringify(page.artboards)).sort(function(a, b) {
                            var nameA = a.name.toUpperCase(),
                                nameB = b.name.toUpperCase();
                            if (nameA < nameB) {
                                return -1;
                            }
                            if (nameA > nameB) {
                                return 1;
                            }
                            return 0;
                        });
                    }

                    pagesData[page.objectID] = artboardsData;
                    pagesName[page.objectID] = page.name;
                    $.each(artboardsData, function(index, artboard){
                        var $a = $('#aid-' + artboard.objectID);
                        $a.removeClass('alt');
                        if(index%2){
                            $a.addClass('alt');
                        }
                        $a
                            .removeAttr('cache-top')
                            .css('top', index * 48);
                    });
                }
            });
            filter(data);
        },
        filter = function(data){
            var $filter = $('#filter'),
                filterText = $filter.val().toLowerCase().trim();

            if(filterText){
                $('#artboards-list li').hide();
                var i = 0;
                $.each(pagesData, function(index, artboardData){
                    var $p = $('.p-' + i),
                        cacheHeight = $p.attr('cache-height');
                    if(!cacheHeight){
                        var h = $p.css('height');
                        $p.attr('cache-height', h);
                    }

                    var filtered = artboardData.filter(function(aData){
                        return (pagesName[index] + ' ' + aData.name).toLowerCase().indexOf( filterText ) >= 0
                    });

                    $p.css('height', filtered.length * 48);

                    $.each(filtered, function(index, aData){
                        var $a = $('#aid-' + aData.objectID),
                            cacheTop = $a.attr('cache-top');
                        if(!cacheTop){
                            var t = $a.css('top');
                            $a.attr('cache-top', t);
                        }

                        $a
                            .show()
                            .css('top', index * 48);
                    });

                    i++;
                });
            }
            else{
                $('#artboards-list ul').each(function(){
                    $(this).css('height', $(this).attr('cache-height'))
                    $(this).removeAttr('cache-height');
                });
                $('#artboards-list li').each(function(){
                    $(this).css('top', $(this).attr('cache-top')).show();
                    $(this).removeAttr('cache-top');
                });
            }

        },
        checkedOption = function(){
            if($('input[name=export-option]:checked').length > 0){
                $('input[name=order]').attr('disabled', false);
            }
            else{
                $('input[name=order]').attr('disabled', true);
            }
        },
        pagesData = {},
        pagesName = {},
        init = function(data) {
            $('body').html([
                    '<div class="container">',
                        '<div id="artboards-list" class="list">',
                            '<div class="empty" style="padding-top:128px;">',
                                '<h3>' + _('No artboards!') + '</h3>',
                                '<p>' + _('You need add some artboards.') + '</p>',
                            '</div>',
                        '</div>',
                        '<div class="options-bar" style="margin-bottom:0;">',
                            '<div class="opts-checkbox" tabindex="0">',
                                '<div class="v-checkbox v-checked"></div>',
                                '<ul class="checkbutton">',
                                    '<li class="c-all">' + _('All') + '</li>',
                                    '<li class="c-none">' + _('None') + '</li>',
                                    '<li class="c-showing">' + _('Select only filtered') + '</li>',
                                    '<li class="c-selection">' + _('Selection of Sketch') + '</li>',
                                    '<li class="c-current">' + _('Current of Sketch') + '</li>',
                                '</ul>',
                            '</div>',
                            '<div class="opts-filter">',
                                '<input id="filter" type="text" placeholder="' + _('Filter') + '">',
                            '</div>',
                        '</div>',
                        '<div class="options">',
                            '<div class="item">',
                                '<div class="orderbox">',
                                    '<div class="radiobox positive-radio">',
                                        '<input id="positive" type="radio" name="order" value="positive">',
                                        '<label for="positive"></label>',
                                    '</div>',
                                    '<div class="radiobox reverse-radio">',
                                        '<input id="reverse" type="radio" name="order" value="reverse">',
                                        '<label for="reverse"></label>',
                                    '</div>',
                                    '<div class="radiobox alphabet-radio">',
                                        '<input id="alphabet" type="radio" name="order" value="alphabet">',
                                        '<label for="alphabet"></label>',
                                    '</div>',
                                '</div>',
                                '<label>',
                                    '<div class="checkbox">',
                                        '<input id="export-option" type="checkbox" name="export-option" value="1">',
                                        '<label for="export-option"></label>',
                                    '</div>',
                                    _('Advanced mode'),
                                '</label>',
                            '</div>',
                            //export influence rect option
                            '<div class="item" style="margin-top:10px;">',
                                '<label>',
                                    '<div class="checkbox">',
                                        '<input id="export-influenceRect" type="checkbox" name="export-influenceRect" value="0">',
                                        '<label for="export-influenceRect"></label>',
                                    '</div>',
                                    _('Export layer influence rect'),
                                '</label>',
                            '</div>',

                        '</div>',
                        '<div class="footer">',
                            '<button id="submit" class="submit" disabled="disabled">' + _('Export') + '</button>',
                        '</div>',
                    '</div>'
                ].join(''))
            var artboardsList = [];
            $.each(data.pages, function(index, page){
                var pageIndex = index;
                if(page.artboards.length > 0){
                    artboardsList.push('<div id="page-' + pageIndex + '" class="page-list">');
                    artboardsList.push('<label class="page-item">',
                                            '<div class="checkbox">',
                                                '<input id="p-' + pageIndex + '" type="checkbox" class="page-' + pageIndex + '" name="pages" value="' + pageIndex + '">',
                                                '<label for="p-' + pageIndex + '"></label>',
                                            '</div>',
                                            page.name,
                                            '</label>');
                    var ulHeight = 'height:' + page.artboards.length * 48 + 'px;';
                    artboardsList.push('<ul class="p-' + index + '" style="' + ulHeight + '">');
                    $.each(page.artboards, function(index, artboard){
                        var liTop = 'top:' + 48 * index + 'px;',
                            classAlt = (index%2)? 'alt': '';
                        artboardsList.push(
                                '<li id="aid-' + artboard.objectID + '" class="' + classAlt + '" title="' + artboard.name + '" style="' + liTop + '">',
                                    '<label class="artboard-item">',
                                    '<div class="checkbox">',
                                        '<input id="artboard-' + artboard.objectID + '" type="checkbox" class="page-' + pageIndex + '" name="artboards" value="' + artboard.objectID + '">',
                                        '<label for="artboard-' + artboard.objectID + '"></label>',
                                    '</div>',
                                    '<div class="text">',
                                    artboard.name,
                                    '</div>',
                                    '<span style="display:none;">' + page.name + '</span>',
                                    '</label>',
                                '</li>'
                            );
                    });
                    artboardsList.push('</ul>');
                    artboardsList.push('</div>');
                }
            });
            if(artboardsList.length > 0){
                $('#artboards-list').html(artboardsList.join(''));
            }

            $('input[name=artboards]').change(function(){
                var id = $(this).attr('class');
                checkVCheckbox();
                checkPCheckbox();
            });

            if(data.exportOption){
                $('#export-option').attr('checked', true);
            }

            if(data.exportInfluenceRect){
                $('#export-influenceRect').attr('checked', true);
            }

            $('.checkbutton')
                .on('click', '.c-all', function(){
                    $('input[name=artboards]').prop("checked", true);
                    $('.opts-checkbox').blur();
                    checkVCheckbox();
                    checkPCheckbox();
                })
                .on('click', '.c-none', function(){
                    $('input[name=artboards]').prop("checked", false);
                    $('.opts-checkbox').blur();
                    checkVCheckbox();
                    checkPCheckbox();
                })
                .on('click', '.c-showing', function(){
                    $('input[name=artboards]').prop("checked", false);
                    $('#artboards-list li').each(function(){
                        if($(this).css('display') != 'none'){
                            $(this).find('input[name=artboards]').prop("checked", true);
                        }
                    });
                    $('.opts-checkbox').blur();
                    checkVCheckbox();
                    checkPCheckbox();
                })
                .on('click', '.c-selection', function(){
                    $('input[name=artboards]').prop("checked", false);
                    $.each(data.selection, function(index, id){
                        $('#artboard-' + id).prop("checked", true);
                    });
                    $('.opts-checkbox').blur();
                    checkVCheckbox();
                    checkPCheckbox();
                })
                .on('click', '.c-current', function(){
                    $('input[name=artboards]').prop("checked", false);
                    $.each(data.current, function(index, id){
                        $('#artboard-' + id).prop("checked", true);
                    });
                    $('.opts-checkbox').blur();
                    checkVCheckbox();
                    checkPCheckbox();
                });

            $('input[name=pages]').change(function(){
                var id = $(this).attr('class');
                $('.' + id + '[name=artboards]').prop('checked', false);
                if($(this).is(':checked')){
                    $('.' + id + '[name=artboards]').prop('checked', true);
                }
                checkVCheckbox();
                checkPCheckbox();
            });

            $('#filter').keyup(function(){
                filter(data);
            });

            $('#' + data.order).attr('checked', true);


            $('input[name=order]').change(function(){
                order(data);
            });

            $('input[name=export-option]').change(checkedOption);

            $('#submit').click(function(){
                var data = {}
                $('input[name=artboards]:checked').each(function(){
                    var objectID = $(this).val();
                    data[objectID] = true;
                });
                data.exportOption = false;
                if( $('input[name=export-option]:checked').length > 0 ) data.exportOption = true;

                data.exportInfluenceRect = false;
                if( $('input[name=export-influenceRect]:checked').length > 0 ) data.exportInfluenceRect = true;

                data.order = $('input[name=order]:checked').val();

                SMAction('submit', data);
            });

            if(!data.selection){
                $.each(data.current, function(index, id){
                    $('#artboard-' + id).prop("checked", true);
                });
            }

            $.each(data.selection, function(index, id){
                $('#artboard-' + id).prop("checked", true);
            });


            checkVCheckbox();
            checkPCheckbox();
            order(data);
            checkedOption();
            $('#artboards-list').scrollTop($('input[name=artboards]:checked').parent().parent().position().top);
        }
    // $(function(){
    //     init(data)
    // });
    -->
    </script>
  </head>
  <body></body>
</html>
